<template>
  <view class="lightColour navTop" ref="navTop" id="navTop">
    <van-nav-bar
      title="微信账号"
      right-text="保存"
      left-arrow
      fixed
      class="loginNav"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="line"></div>

    <van-cell-group :border="false">
      <van-field value placeholder="请输入您的微信账号" label="微信账号"/>
       <van-cell title="收款二维码" use-label-slot title-class='cellTit' >
              <view slot="label" class="addfile" @click="chooseImage">
                  <image v-if="imageSrc" :src="imageSrc" class="image" mode="scaleToFill"></image>
                  <view v-else class="addfileBg">
                    <van-icon name="plus" />
                  </view>
              </view>
       </van-cell>
    </van-cell-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc:''
    };
  },
  onReady() {},
  methods: {
    onClickLeft() {
      uni.navigateBack();
    },
    onClickRight() {
      uni.navigateBack();
    },
    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album"],
        success: res => {
          console.log(
            "chooseImage success, temp path is",
            res.tempFilePaths[0]
          );
          var imageSrc = res.tempFilePaths[0];
          uni.uploadFile({
            url: "https://unidemo.dcloud.net.cn/upload",
            filePath: imageSrc,
            fileType: "image",
            name: "data",
            success: res => {
              console.log("uploadImage success, res is:", res);
              uni.showToast({
                title: "上传成功",
                icon: "success",
                duration: 1000
              });
              this.imageSrc = imageSrc;
            },
            fail: err => {
              console.log("uploadImage fail", err);
              uni.showModal({
                content: err.errMsg,
                showCancel: false
              });
            }
          });
        },
        fail: err => {
          console.log("chooseImage fail", err);
        }
      });
    }
  }
};
</script>

<style lang="less">
.addfile{
  width: 162upx;
  height: 162upx;
  .image{width: 100%;height: 100%;}
  .addfileBg{width: 100%;height: 100%;
    background: #E9E9E9;
    text-align: center;
    van-icon{font-size: 42upx;color: #C5C5C5;line-height: 162upx;}
  }
}

</style>
